<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layerDemo1</title>
</head>
<body>
<a href="http://www.runoob.com/jsp/jsp-jstl.html">c标签学习</a>
<hr/>
跟你平时写的一样的，就在form标签里的action属性：
<form class="layui-form" action="http://192.168.1.14/query.php">
</form>
	1111<br/>
		<c:forEach var="i" varStatus="varStatusName" begin="1" end="5" >
			
				<button id="xx${i }">信息框${i }</button>
				<button id="ym${i }">页面层${i }</button>
				<button id="jz${i }">加载层${i }</button>
				<button id="ts${i }">tips层${i }</button>	
				<button id="el${i }">其他演示${i }</button><br/>
			
			</c:forEach>
		
	<button id="test1">小小提示层</button>
  <button id="xy">信息框${i }</button>
	<script src="../js/jquery-1.8.3.js"></script>
	<script src="../layer/layer.js"></script>
	<script>
		$('#test1').on('click', function() {
			layer.msg('Hello layer');
		});
		$('#xx1').on('click', function() {
			//信息框-例1
			layer.alert('见到你真的很高兴', {icon: 6});
		});
		$('#xx2').on('click', function() {
			 
			//信息框-例2
			layer.msg('你确定你很帅么？', {
			  time: 0 //不自动关闭
			  ,btn: ['必须啊', '丑到爆']
			  ,yes: function(index){
			    layer.close(index);
			    layer.msg('雅蠛蝶 O.o', {
			      icon: 6
			      ,btn: ['嗷','嗷','嗷']
			    });
			  }
			});
		});
		$('#xx3').on('click', function() {
			//信息框-例3
			layer.msg('这是最常用的吧');
		});
		$('#xx4').on('click', function() {
			//信息框-例4
			layer.msg('不开心。。', {icon: 5});
		});
		$('#xx5').on('click', function() {
			//信息框-例5
			layer.msg('玩命卖萌中', function(){
			//关闭后的操作
				layer.msg('不开心。。', {icon: 5});
			});
		});
		
	
		
		$('#ym1').on('click', function() {
			//页面层-自定义
			layer.open({
			  type: 1,
			  title: false,
			  closeBtn: 0,
			  shadeClose: true,
			  skin: 'yourclass',
			  content: '自定义HTML内容'
			});
		});	
		$('#ym2').on('click', function() {
			//页面层-佟丽娅
			layer.open({
			  type: 1,
			  title: false,
			  closeBtn: 0,
			  area: '516px',
			  skin: 'layui-layer-nobg', //没有背景色
			  shadeClose: true,
			  content: $('#xy')
			});
		})
		$('#ym3').on('click', function() {

			//iframe层-父子操作
			layer.open({
			  type: 2,
			  area: ['700px', '450px'],
			  fixed: false, //不固定
			  maxmin: true,
			  content: 'layerDemo2.jsp'
			});	
		})
		$('#ym4').on('click', function() {
			//iframe层-多媒体
			layer.open({
			  type: 2,
			  title: false,
			  area: ['630px', '360px'],
			  shade: 0.8,
			  closeBtn: 0,
			  shadeClose: true,
			  content: '//player.youku.com/embed/XMjY3MzgzODg0'
			});
		})
		$('#ym5').on('click', function() {

			layer.msg('点击任意处关闭');
			//iframe层-禁滚动条
			layer.open({
			  type: 2,
			  area: ['360px', '500px'],
			  skin: 'layui-layer-rim', //加上边框
			  content: ['login', 'no']
			});
		})
		
		$('#jz1').on('click', function() {
			//加载层-默认风格
			layer.load();
			//此处演示关闭
			setTimeout(function(){
			  layer.closeAll('loading');
			}, 2000);	
		})
		$('#jz2').on('click', function() {
			//加载层-风格2
			layer.load(1);
			//此处演示关闭
			setTimeout(function(){
			  layer.closeAll('loading');
			}, 2000);
		})
		$('#jz3').on('click', function() {
			//加载层-风格3
			layer.load(2);
			//此处演示关闭
			setTimeout(function(){
			  layer.closeAll('loading');
			}, 2000);
		})
		$('#jz4').on('click', function() {
			//加载层-风格4
			layer.msg('加载中', {
			  icon: 16
			  ,shade: 0.01
			});
		})
		$('#jz5').on('click', function() {
			//打酱油
			layer.msg('尼玛，打个酱油', {icon: 4});
		})
		$('#ts1').on('click', function() {
			//tips层-上
			layer.tips('上', '#ts1', {
			  tips: [1, '#0FA6D8'] //还可配置颜色
			});
		})
		$('#ts2').on('click', function() {
			//tips层-右
			layer.tips('默认就是向右的', '#ts2');
		})
		$('#ts3').on('click', function() {
			//tips层-下
			layer.tips('下', '#ts3', {
			  tips: 3
			});
		})
		$('#ts4').on('click', function() {
			//tips层-左
			layer.tips('左边么么哒', '#ts4', {
			  tips: [4, '#78BA32']
			});
		})
		$('#ts5').on('click', function() {
			//tips层-右
			layer.tips('默认就是向右的', '#ts2');
			layer.tips('不销毁之前的', '#ts5', {
			  tipsMore: false
			});
		})
		$('#el1').on('click', function() {
			//默认prompt
			layer.prompt(function(val, index){
			  layer.msg('得到了'+val);
			  layer.close(index);
			});
		})
		$('#el2').on('click', function() {
			
			//屏蔽浏览器滚动条
			layer.open({
			  content: '浏览器滚动条已锁',
			  scrollbar: false
			});
		})
		$('#el3').on('click', function() {
			//弹出即全屏
			var index = layer.open({
			  type: 2,
			  content: 'http://layim.layui.com',
			  area: ['320px', '195px'],
			  maxmin: true
			});
		})
		$('#el4').on('click', function() {
			layer.full(index);
			//正上方
			layer.msg('灵活运用offset', {
			  offset: 't',
			  anim: 6
			});
		})
		$('#el5').on('click', function() {

			//更多例子 
			layer.msg('Hi');
		})
		
		/* 
		
	
	
		 */
		  
	</script>
</body>
</html>